<template>
  <div>
    <div class="banner">
      <el-carousel trigger="click" height="300px">
        <el-carousel-item
          v-for="(img, index) in imgs"
          :key="index"
          class="carousel"
          ><div class="imgs">
            <img :src="img.imageUrl" alt="img.imageUrl" class="imgs" />
             <div class="background" :class="img.imageUrl"></div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import { reqBanner } from "@/api/index";

export default {
  name: "banner",
  data() {
    return {
      //存放轮播图片
      imgs: [

      ],
    };
  },
  mounted() {
    //调用获取轮播图的方法
    this.getBannerList();
  },
  methods: {
    /**
     * 获取轮播图列表
     */
    async getBannerList() {
      await reqBanner()
        //成功的回调
        .then((res) => {
          // console.log(res);
          this.imgs = res.data.banners;
          // console.log(res.data.banners[0]);
        })
        //失败的回调
        .catch((error) => {
          this.$message({
            message: "很遗憾你，这是一条失败的消息",
            type: "error",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.banner {
  width: auto;
  height: auto;

  .carousel {
    text-align: center;
    position: absolute;
    .imgs {
      position: relative;
      .imgs {
        width: 53em;
        z-index: 2;

      }
      .background {
       position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        // background-image: url(img/images/1.jpg);
        background-size: 100% 100%;
        filter: blur(30px);
      }
    }
  }
}
</style>